<template>
  <div class="app-container">
    <h2 class="con-title">资金列表</h2>
    <div class="source content">
      <div class="input-line">
        <div class="input-inline">
          <label class="input-label">订单编号：</label>
          <div class="el-input" style="width:180px">
            <input type="text" autocomplete="off" placeholder="请输入订单编号" class="el-input__inner" v-model="listQuery.orderCode">
          </div>
        </div>
        <div class="input-inline">
          <label class="input-label">类型：</label>
          <div class="el-input" style="width:180px">
            <el-select v-model="listQuery.dealType" clearable placeholder="请选择类型">
              <el-option v-for="item in dealTypeOption" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="input-inline">
          <label class="input-label">上传时间：</label>
          <div class="el-input" style="width:180px">
            <el-date-picker v-model="listQuery.startDate" type="date" placeholder="选择开始日期" :picker-options="pickerOptions1" value-format="yyyy-MM-dd">
            </el-date-picker>
          </div>
          <div class="form-mid">-</div>
          <div class="el-input" style="width:180px">
            <el-date-picker v-model="endDate" type="date" placeholder="选择结束日期" :picker-options="pickerOptions2" value-format="yyyy-MM-dd">
            </el-date-picker>
          </div>
        </div>
      </div>
      <el-button type="primary" icon="el-icon-search" style="position: absolute;top:20px;right:20px;" size="small" @click="searchSubmit">搜索</el-button>
    </div>
    <el-table :data="list" ref="tableData" v-loading.body="listLoading" stripe element-loading-text="Loading" border highlight-current-row>
      <el-table-column align="center" label='订单编号' min-width="180px">
        <template slot-scope="scope">
          {{scope.row.orderCode}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="类型">
        <template slot-scope="scope">
          {{scope.row.dealType|formatType}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="订单总金（元）">
        <template slot-scope="scope">
          {{scope.row.orderPayPrice|formatMoney}}
        </template>
      </el-table-column>
      <el-table-column label="应收支金额（元）" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.dealType === 1" class="success">+{{scope.row.dealPrice|formatMoney}}</span>
          <span v-else class="danger">-{{scope.row.dealPrice|formatMoney}}</span>
        </template>
      </el-table-column>
      <!--<el-table-column align="center" label='服务费'>
        <template slot-scope="scope">
        </template>
      </el-table-column>-->
      <el-table-column align="center" label='支付/退款时间' min-width="150px">
        <template slot-scope="scope">
          {{scope.row.dealDate| formatDate("yyyy-MM-dd hh:mm")}}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <router-link :to="{ path: '/list/orderDetail', query: { orderId: scope.row.id }}">
            <el-button type="text" size="small">查看详情</el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.pageIndex"
      :page-sizes="[10, 20, 30, 40]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>
</template>

<script>
  import {
    getFinanceList
  } from '@/api/finance'
  export default {
    data() {
      return {
        currentPage4: 1,
        total: 0,
        listQuery: {
          pageIndex: 1,
          pageSize: 20,
          orderCode: '',
          dealType: '',
          startDate: '',
          endDate: ''
        },
        endDate: '',
        dealTypeOption: [{
          value: '1',
          label: '订单收入'
        }, {
          value: '2',
          label: '订单退款'
        }],
        list: null,
        listLoading: true,
        pickerOptions1: {
          disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e7
          }
        },
        pickerOptions2: {
          disabledDate: (time) => {
            return time.getTime() < this.value1
          }
        }
      }
    },
    filters: {
      formatType(val) {
        const typeMap = {
          1: '订单收入',
          2: '订单退款'
        }
        return typeMap[val]
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      // 列表加载
      fetchData() {
        // 判断变量是不是空，不能直接使用this.listQuery.endDate影响回显值
        if (this.endDate !== '') {
          const date = new Date(this.endDate)
          // 加一天
          const time = date.setDate(date.getDate() + 1)
          // 使用filters 里使用
          this.listQuery.endDate = this.$options.filters.formatDate(time, 'yyyy-MM-dd')
        }
        this.listLoading = true
        // 获取金额列表
        getFinanceList(this.listQuery).then(res => {
          this.list = res.data.capitalList
          this.total = res.data.total
          this.listLoading = false
        })
      },
      searchSubmit() {
        this.listQuery.pageIndex = 1
        this.fetchData()
      },
      handleSizeChange(val) {
        this.listQuery.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.listQuery.pageIndex = val
        this.fetchData()
      }

    }
  }

</script>
<style rel="stylesheet/scss" lang="scss">
  @import 'src/assets/css/jx-order.scss';
  @import 'src/assets/css/sui-style.scss';
  .success {
    color: #67c23a
  }

  .danger {
    color: #f56c6c
  }

</style>
